feat(rspeedy): add css sourcemap option#2442
Conversation
🦋 Changeset detectedLatest commit: 019c264 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
📝 WalkthroughWalkthroughAdds an optional Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
There was a problem hiding this comment.
Pull request overview
Adds support for emitting CSS sourcemaps via output.sourceMap.css in the Rspeedy config, aligning config typing/validation with expected bundler behavior and extending integration tests to cover CSS map emission.
Changes:
- Extend
SourceMapconfig to includecss?: booleanand update extracted API docs. - Add config validation + d.ts type tests for the new
output.sourceMap.cssoption. - Update plugin-react sourcemap fixture/tests to include CSS and assert CSS maps are only emitted when enabled; add a changeset entry.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/rspeedy/plugin-react/test/sourcemap.test.ts | Refactors sourcemap tests and adds assertions for optional CSS sourcemap emission. |
| packages/rspeedy/plugin-react/test/fixtures/sourcemap/index.tsx | Imports fixture CSS to produce a CSS output for sourcemap verification. |
| packages/rspeedy/plugin-react/test/fixtures/sourcemap/index.css | New fixture stylesheet used to validate CSS sourcemap mapping. |
| packages/rspeedy/core/test/config/validate.test.ts | Adds validation coverage for output.sourceMap boolean/object forms including css. |
| packages/rspeedy/core/test/config/output.test-d.ts | Adds type-level assertions for output.sourceMap.css and rejects non-boolean values. |
| packages/rspeedy/core/src/config/output/source-map.ts | Introduces the css option in the public SourceMap interface with docs. |
| packages/rspeedy/core/etc/rspeedy.api.md | Updates extracted public API surface to include SourceMap.css. |
| .changeset/add-css-sourcemap-option.md | Documents the new option and bumps @lynx-js/rspeedy with a patch changeset. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/rspeedy/plugin-react/test/sourcemap.test.ts (1)
5-6:⚠️ Potential issue | 🟠 MajorReplace
fs/promises.globwith a Node.js 18+ compatible alternative.The package declares
"engines": { "node": ">=18" }butfs/promises.globwas introduced in Node.js v22.0.0. The ESLint suppression masks a real runtime error on Node 18–21. Remove the suppression and either update the package's engines field to"node": "^22 || ^24"to match the root requirement, or use a compatible glob utility (e.g.,globnpm package) that works across all declared Node versions. Per coding guidelines, ESLint rules must be followed, not suppressed to hide incompatibilities.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/rspeedy/plugin-react/test/sourcemap.test.ts` around lines 5 - 6, The current import uses fs/promises.glob (seen on the import line importing glob, mkdtemp, readFile) which is only available in Node 22+, so remove the ESLint suppression and replace the use of fs/promises.glob with a Node‑18 compatible glob utility: install the "glob" npm package, import its promise API (or promisify glob) instead of destructuring glob from 'node:fs/promises', keep mkdtemp and readFile from 'node:fs/promises' as-is, and update any code referencing the old glob symbol to call the new glob promise function; alternatively, if you prefer to require Node ≥22, update the package's engines field to match (e.g., "^22 || ^24") and remove the suppression.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.changeset/add-css-sourcemap-option.md:
- Around line 12-16: The example places sourceMap at the config root; update the
snippet so sourceMap is nested under output by moving the sourceMap block inside
an output object (i.e., use defineConfig with output.sourceMap.css: true) so
enabling CSS sourcemaps actually works; adjust the example to reference output
and the sourceMap.css option rather than a top-level sourceMap.
In `@packages/rspeedy/plugin-react/test/sourcemap.test.ts`:
- Around line 111-123: The helper getSourceMapFiles collects .map paths in
traversal order which can vary; update getSourceMapFiles to sort the resulting
sourceMapFiles array (e.g., lexicographically) before returning so tests
comparing the full array in order are deterministic; locate the function
getSourceMapFiles and add a stable sort on sourceMapFiles (or use .sort()) just
prior to returning the array.
- Around line 169-180: The test passes a 1-based generated column to
SourceMapConsumer.originalPositionFor, causing wrong mappings; update the
cssColumn computation used for cssConsumer.originalPositionFor so it uses the
zero-based index from .indexOf('.app') (remove the +1) and pass that zero-based
column into cssConsumer.originalPositionFor while keeping the line (cssLine) as
1-based; adjust the same for any analogous js/other source column calculations
(referencing cssColumn and cssConsumer.originalPositionFor).
---
Outside diff comments:
In `@packages/rspeedy/plugin-react/test/sourcemap.test.ts`:
- Around line 5-6: The current import uses fs/promises.glob (seen on the import
line importing glob, mkdtemp, readFile) which is only available in Node 22+, so
remove the ESLint suppression and replace the use of fs/promises.glob with a
Node‑18 compatible glob utility: install the "glob" npm package, import its
promise API (or promisify glob) instead of destructuring glob from
'node:fs/promises', keep mkdtemp and readFile from 'node:fs/promises' as-is, and
update any code referencing the old glob symbol to call the new glob promise
function; alternatively, if you prefer to require Node ≥22, update the package's
engines field to match (e.g., "^22 || ^24") and remove the suppression.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 77a1206f-c53b-4d7a-b491-8f91d18d90de
📒 Files selected for processing (8)
.changeset/add-css-sourcemap-option.mdpackages/rspeedy/core/etc/rspeedy.api.mdpackages/rspeedy/core/src/config/output/source-map.tspackages/rspeedy/core/test/config/output.test-d.tspackages/rspeedy/core/test/config/validate.test.tspackages/rspeedy/plugin-react/test/fixtures/sourcemap/index.csspackages/rspeedy/plugin-react/test/fixtures/sourcemap/index.tsxpackages/rspeedy/plugin-react/test/sourcemap.test.ts
Merging this PR will improve performance by 11.56%
Performance Changes
Comparing Footnotes
|
React External#501 Bundle Size — 580.35KiB (0%).019c264(current) vs 95c2dc3 main#499(baseline) Bundle metrics
|
| Current #501 |
Baseline #499 |
|
|---|---|---|
0B |
0B |
|
0B |
0B |
|
0% |
0% |
|
0 |
0 |
|
3 |
3 |
|
17 |
17 |
|
5 |
5 |
|
8.59% |
8.59% |
|
0 |
0 |
|
0 |
0 |
Bundle analysis report Branch luhc228:hc/css-sourcemap-option Project dashboard
Generated by RelativeCI Documentation Report issue
React Example#7384 Bundle Size — 223.33KiB (0%).019c264(current) vs 95c2dc3 main#7382(baseline) Bundle metrics
|
| Current #7384 |
Baseline #7382 |
|
|---|---|---|
0B |
0B |
|
0B |
0B |
|
0% |
0% |
|
0 |
0 |
|
4 |
4 |
|
179 |
179 |
|
69 |
69 |
|
44.48% |
44.48% |
|
2 |
2 |
|
0 |
0 |
Bundle size by type no changes
| Current #7384 |
Baseline #7382 |
|
|---|---|---|
145.76KiB |
145.76KiB |
|
77.58KiB |
77.58KiB |
Bundle analysis report Branch luhc228:hc/css-sourcemap-option Project dashboard
Generated by RelativeCI Documentation Report issue
React MTF Example#517 Bundle Size — 193.94KiB (0%).019c264(current) vs 95c2dc3 main#515(baseline) Bundle metrics
|
| Current #517 |
Baseline #515 |
|
|---|---|---|
0B |
0B |
|
0B |
0B |
|
0% |
0% |
|
0 |
0 |
|
3 |
3 |
|
173 |
173 |
|
66 |
66 |
|
43.94% |
43.94% |
|
2 |
2 |
|
0 |
0 |
Bundle size by type no changes
| Current #517 |
Baseline #515 |
|
|---|---|---|
111.23KiB |
111.23KiB |
|
82.71KiB |
82.71KiB |
Bundle analysis report Branch luhc228:hc/css-sourcemap-option Project dashboard
Generated by RelativeCI Documentation Report issue
Web Explorer#8958 Bundle Size — 749.55KiB (0%).019c264(current) vs 95c2dc3 main#8956(baseline) Bundle metrics
Bundle size by type
|
| Current #8958 |
Baseline #8956 |
|
|---|---|---|
401.63KiB |
401.63KiB |
|
345.76KiB |
345.76KiB |
|
2.16KiB |
2.16KiB |
Bundle analysis report Branch luhc228:hc/css-sourcemap-option Project dashboard
Generated by RelativeCI Documentation Report issue
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Hengchang Lu <luhengchang228@126.com>
There was a problem hiding this comment.
♻️ Duplicate comments (1)
packages/rspeedy/plugin-react/test/sourcemap.test.ts (1)
197-232:⚠️ Potential issue | 🟡 Minor
originalPositionFor()still receives 1-based generated columns.The
+ 1on lines 203 and 230 converts the 0-basedindexOf()result into a 1-based column.SourceMapConsumer.originalPositionFor({ line, column })expectscolumnto be 0-based (onlylineis 1-based), so these lookups are shifted past the token start and can resolve to an adjacent/wrong segment, making the CSS/JS mapping assertions (basename check + inline snapshot) sensitive to minifier/formatter changes.Suggested fix
const cssColumn = cssSource .split('\n') .at(cssLine - 1)! - .indexOf('.app') + 1 + .indexOf('.app') @@ backgroundSourceLines.forEach((lineContent, index) => { if (lineContent.includes(name)) { line = index + 1 - column = lineContent.indexOf(name) + 1 + column = lineContent.indexOf(name) } })🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/rspeedy/plugin-react/test/sourcemap.test.ts` around lines 197 - 232, The test is passing 1-based columns to SourceMapConsumer.originalPositionFor (it adds +1 to indexOf results), which is wrong because originalPositionFor expects 0-based columns; locate the cssColumn computation (the indexOf('.app') + 1 used before calling cssConsumer.originalPositionFor) and the background lookup that sets column = lineContent.indexOf(name) + 1 inside the loop (used later with consumer.originalPositionFor) and change both to use the raw 0-based indexOf result (remove the +1), keeping line numbers 1-based, and ensure any downstream code that assumes 1-based columns is adjusted accordingly so mappings resolve to the correct segment.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@packages/rspeedy/plugin-react/test/sourcemap.test.ts`:
- Around line 197-232: The test is passing 1-based columns to
SourceMapConsumer.originalPositionFor (it adds +1 to indexOf results), which is
wrong because originalPositionFor expects 0-based columns; locate the cssColumn
computation (the indexOf('.app') + 1 used before calling
cssConsumer.originalPositionFor) and the background lookup that sets column =
lineContent.indexOf(name) + 1 inside the loop (used later with
consumer.originalPositionFor) and change both to use the raw 0-based indexOf
result (remove the +1), keeping line numbers 1-based, and ensure any downstream
code that assumes 1-based columns is adjusted accordingly so mappings resolve to
the correct segment.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 5416ace0-4650-44c0-824b-1cc443c03726
📒 Files selected for processing (1)
packages/rspeedy/plugin-react/test/sourcemap.test.ts
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @lynx-js/react@0.120.0 ### Minor Changes - Bump `@lynx-js/internal-preact` from `10.28.4-dfff9aa` to `10.29.1-20260424024911-12b794f` ([diff](lynx-family/internal-preact@10.28.4-dfff9aa...10.29.1-20260424024911-12b794f)). ([#2512](#2512)) Fixes wrong DOM order when a keyed child moves to a different `$N` slot across a re-render. Cross-slot moves now land at the correct slot position instead of being appended past stable siblings. - Refactor preact to support multi-slots children and reduce the number and depth of snapshot. ([#1764](#1764)) ### Patch Changes - Fix stale callback-local references when transforming JSX inside `children={array.map(...)}` prop expressions. ([#2524](#2524)) - Fix ref callbacks not being cleaned up or re-applied correctly when the ref at the same element slot changes across rerenders that happen before hydration (e.g. a `useEffect` triggering `setState` during the initial background render). ([#2500](#2500)) - fix: reduce redundant updates for main-thread handlers and gestures ([#2188](#2188)) - Updates are faster when the main-thread event handler or gesture object is stable across rerenders (fewer unnecessary native updates). - Spread props rerenders that don't semantically change the handler/gesture no longer trigger redundant updates. - Removing a gesture from spread props reliably clears the gesture state on the target element. - Fix hydration edge cases by tolerating serialized snapshot nodes with missing `values` ([#2481](#2481)) - Keep ReactLynx Testing Library imports aligned with the contained snapshot runtime paths. ([#2498](#2498)) ## @lynx-js/template-webpack-plugin@0.11.0 ### Minor Changes - Add CSS source map support and source-mapped template encode diagnostics. ([#2483](#2483)) ### Patch Changes - fix: genStyleInfo should also preserve CSS variable fallback values when encoding web-core stylesheets so declarations like `var(--token, rgba(...))` are emitted with their fallback intact. ([#2502](#2502)) - Updated dependencies \[[`e179680`](e179680), [`8352530`](8352530), [`30f0277`](30f0277), [`887b8aa`](887b8aa), [`1d4abfc`](1d4abfc), [`25e196b`](25e196b), [`fb7bc84`](fb7bc84), [`9e149c4`](9e149c4), [`30f0277`](30f0277), [`9e149c4`](9e149c4)]: - @lynx-js/css-serializer@0.1.6 - @lynx-js/web-core@0.20.3 ## @lynx-js/i18next-translation-dedupe@0.0.1 ### Patch Changes - Introduce `@lynx-js/i18next-translation-dedupe` package to avoid bundling i18next translations twice in Lynx apps. ([#2482](#2482)) The package reads translations extracted by `rsbuild-plugin-i18next-extractor`, skips the extractor's default rendered asset, and writes the translations into the Lynx bundle custom section: ```json { "customSections": { "i18next-translations": { "content": { "en-US": { "hello": "Hello" }, "zh-CN": { "hello": "你好" } } } } } ``` ## @lynx-js/docs-mcp-server@0.2.2 ### Patch Changes - Fix Windows startup error. ([#2474](#2474)) ## @lynx-js/react-umd@0.120.0 ### Patch Changes - Support compile main-thread script to bytecode in external bundle ([#2459](#2459)) ## @lynx-js/rspeedy@0.14.3 ### Patch Changes - add a `sourceMap.css` option to emit CSS sourcemaps. ([#2442](#2442)) By default, `sourceMap.css` is false. You can set it to true to emit CSS sourcemaps. ```js import { defineConfig } from "@lynx-js/rspeedy"; export default defineConfig({ output: { sourceMap: { css: true, }, }, }); ``` - bump rsdoctor to 1.5.6 ([#2410](#2410)) - Enable CSS source maps by default in Rspeedy output config. ([#2483](#2483)) - Prefer physical routable IPv4 addresses over tunnel and link-local interfaces when resolving the dev host IP for generated preview and bundle URLs. ([#2409](#2409)) - Updated dependencies \[]: - @lynx-js/web-rsbuild-server-middleware@0.20.3 ## @lynx-js/lynx-bundle-rslib-config@0.3.2 ### Patch Changes - Support compile main-thread script to bytecode in external bundle ([#2459](#2459)) - Updated dependencies \[[`e179680`](e179680)]: - @lynx-js/css-serializer@0.1.6 ## @lynx-js/react-rsbuild-plugin@0.16.1 ### Patch Changes - Respect `dev.hmr: false` when installing React Refresh integrations so disabled HMR no longer injects the refresh loader or plugin. ([#2487](#2487)) - Fix stale callback-local references when transforming JSX inside `children={array.map(...)}` prop expressions. ([#2524](#2524)) - Supports @lynx-js/react 0.120.0 ([#1764](#1764)) - Updated dependencies \[[`e179680`](e179680), [`13655ac`](13655ac), [`f15494b`](f15494b), [`e179680`](e179680), [`e179680`](e179680)]: - @lynx-js/template-webpack-plugin@0.11.0 - @lynx-js/css-extract-webpack-plugin@0.7.1 - @lynx-js/react-webpack-plugin@0.9.2 - @lynx-js/react-alias-rsbuild-plugin@0.16.1 - @lynx-js/use-sync-external-store@1.5.0 - @lynx-js/react-refresh-webpack-plugin@0.3.5 ## @lynx-js/css-serializer@0.1.6 ### Patch Changes - Add CSS source map support and source-mapped template encode diagnostics. ([#2483](#2483)) ## @lynx-js/web-core@0.20.3 ### Patch Changes - fix: `__AddClass` triggers style updates when `enableCSSSelector` is `false` ([#2515](#2515)) `__AddClass` was missing the expected call to `update_css_og_style` when CSS selectors are disabled (`enableCSSSelector: false`). With this fix, dynamically adding a class correctly delegates style population from the template AST into the DOM, mirroring the behavior of `__SetClasses`. Added behavioral unit test and end-to-end playwright validations using dynamically generated JSON AST `styleInfo` mocks. - fix(web-core): skip setting lynxEntryNameAttribute for **Card** and use constants for server element APIs ([#2510](#2510)) - Fix componentCSSID behavior for SSR and main thread by calculating element css_id from parent component correctly. ([#2495](#2495)) - fix: avoid panic in dispatch_event_by_path when element data cannot be retrieved ([#2508](#2508)) - fix: filter out -1 uniqueId in commonEventHandler ([#2493](#2493)) - feat: add x-markdown support ([#2412](#2412)) Add opt-in support for the `x-markdown` element on Lynx Web, including Markdown rendering together with its related styling, interaction, animation, truncation, range rendering, and effect capabilities exposed through the component API. Update the `web-core`, `web-core-wasm`, and `web-mainthread-apis` runtime paths to use the shared property-or-attribute setter from `web-constants`, so custom elements such as `x-markdown` can receive structured property values correctly instead of being forced through string-only attribute updates. ```javascript import "@lynx-js/web-elements/XMarkdown"; ``` - fix: transformVH not work with cqw unit as the base length ([#2469](#2469)) - fix: add cardType resolution for legacy json lynx bundle ([#2510](#2510)) - fix: the default value of rpx is supposed to be 1/750 cqw ([#2469](#2469)) - Updated dependencies \[[`e179680`](e179680), [`647334c`](647334c), [`fb7bc84`](fb7bc84), [`9454dc4`](9454dc4), [`bdec498`](bdec498), [`b0247f9`](b0247f9), [`eec539a`](eec539a)]: - @lynx-js/css-serializer@0.1.6 - @lynx-js/web-elements@0.12.1 - @lynx-js/web-worker-rpc@0.20.3 ## @lynx-js/web-elements@0.12.1 ### Patch Changes - fix: XMarkdown slot created should not have prefix ([#2520](#2520)) - feat: add x-markdown support ([#2412](#2412)) Add opt-in support for the `x-markdown` element on Lynx Web, including Markdown rendering together with its related styling, interaction, animation, truncation, range rendering, and effect capabilities exposed through the component API. Update the `web-core`, `web-core-wasm`, and `web-mainthread-apis` runtime paths to use the shared property-or-attribute setter from `web-constants`, so custom elements such as `x-markdown` can receive structured property values correctly instead of being forced through string-only attribute updates. ```javascript import "@lynx-js/web-elements/XMarkdown"; ``` - fix: x-markdown inline view injection no longer queries light DOM children when the content attribute changes. Consumers must now pre-set `slot="{id}"` on the child element they want to project into `inlineview://{id}`. ([#2516](#2516)) - fix: list cannot drag-scroll inside x-foldview-slot-ng ([#2507](#2507)) Cause: `touchstart` used `elementsFromPoint(pageX, pageY)` (expects `clientX/clientY`), so hit-testing can miss the real inner scroller (e.g. `x-list` shadow `#content`) when the document is scrolled. Fix: use `elementsFromPoint(clientX, clientY)` + `event.composedPath()` for Shadow DOM, and keep `previousPageX` updated during `touchmove`. - fix: line-height of markdown-style should be added `px` ([#2509](#2509)) - fix: list `bindscrolltolower` may not trigger because the lower threshold ([#2484](#2484)) sentinel had no effective size or offset, causing the bottom `IntersectionObserver` to miss the list boundary ## @lynx-js/web-explorer@0.0.17 ### Patch Changes - bump rsdoctor to 1.5.6 ([#2410](#2410)) ## @lynx-js/css-extract-webpack-plugin@0.7.1 ### Patch Changes - Fix CSS source map line offsets when wrapping extracted CSS with cssId metadata. ([#2514](#2514)) - Support `@lynx-js/template-webpack-plugin` v0.11.0. ([#2483](#2483)) ## @lynx-js/react-webpack-plugin@0.9.2 ### Patch Changes - Support `@lynx-js/template-webpack-plugin` v0.11.0. ([#2483](#2483)) ## create-rspeedy@0.14.3 ## @lynx-js/react-alias-rsbuild-plugin@0.16.1 ## upgrade-rspeedy@0.14.3 ## @lynx-js/web-rsbuild-server-middleware@0.20.3 ## @lynx-js/web-worker-rpc@0.20.3 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Related PR: luhc228#2
Summary by CodeRabbit
New Features
Tests
Chores
Checklist